/**
 * @desc
 * @author  刘贺[of2220]
 * @company qianmi.com
 * @Date    2017/2/9
 */
"use strict";

import React from 'react'
import Immutable from 'immutable';
import {msg} from 'iflux';
import { Card,Pagination ,Icon,Input,Modal} from 'antd';
import './cardList.less';

const defaultCategoryImg = 'http://pic.qianmi.com/BossNew/5.0/img/ldh-file1.png';
const prefix = 'http://qianmi-web.oss-cn-hangzhou.aliyuncs.com/';

export default class CardList extends React.Component{
    static defaultProps = {
        curRelateImgInfoData:Immutable.fromJS([]),
        pageNum:0,
        pageSize:0,
        totalCount:0
    };
    constructor(props){
        super(props);
        this.state = {
            onFocusId:''
        }
    }

    render(){
        return (
            <div>
                <ul className="cardList">

                    {this.props.curRelateImgInfoData.map((item,index)=>{
                        item = item.toJS();
                        if(item.isCate){
                            return (<li key={item.id}>
                                <Card style={{width: 100}} bodyStyle={{padding: 0}}>
                                    <div className="custom-image">
                                        <a onClick={()=>{msg.emit('enter::next::cate',item.id)}}><img src={defaultCategoryImg}/></a>
                                    </div>
                                    {
                                        this.state.onFocusId === item.id
                                            ?
                                            <Input defaultValue={item.name} autoFocus={true} onBlur={this._updateCateName.bind(this,item.id,item.name)}/>
                                            :
                                            <h5 onClick={() => {
                                                this.setState({onFocusId: item.id})
                                            }}>{item.name}</h5>
                                    }
                                    <div className="deleteItem" >
                                        <a onClick={this._deleteCate.bind(this,item.id)}><Icon type="delete" /></a>
                                    </div>
                                </Card>
                            </li>)
                        }
                        return (<li key={item.id}>
                            <Card style={{width: 100}} bodyStyle={{padding: 0}}>
                                <div className="custom-image">
                                    <img src={prefix + item.src}/>
                                </div>
                                {
                                    this.state.onFocusId === item.id
                                        ?
                                        <Input defaultValue={item.name} autoFocus={true} onBlur={this._updateImageInfo.bind(this,item.id,item.name)}/>
                                        :
                                        <h5 onClick={()=>{this.setState({onFocusId: item.id})}}>{item.name}</h5>
                                }
                                <div className="deleteItem">
                                    <a onClick={() => {msg.emit('delete::image',{id:item.id})}}><Icon type="delete"/></a>
                                </div>
                            </Card>
                        </li>)
                    })}
                </ul>
                <div style={{paddingLeft: '25%'}}>
                    <Pagination defaultCurrent={this.props.pageNum + 1} current={this.props.pageNum + 1}
                                showTotal={(total, range) => `当前第 ${range[0]} - ${range[1]} 条 共计 ${total} 条`}
                                pageSize={this.props.pageSize} total={this.props.totalCount}
                                onChange={this._changePageNum.bind(this)}
                                showSizeChanger={true}
                                pageSizeOptions={['10', '20', '30', '40']}
                                onShowSizeChange={()=>{}}
                                locale={}/>
                </div>
            </div>

        );
    }
    _updateCateName(id,oldName,e){
        this.setState({onFocusId: ''});
        let name = e.target.value.trim();
        name !== oldName && name !== '' && msg.emit('update::cate::name',{id,name});
    }

    _updateImageInfo(id,oldName,e){
        this.setState({onFocusId: ''});
        let name = e.target.value.trim();
        name !== oldName && name !== '' && msg.emit('update::image::info',{id,imgInfo:{name}});
    }

    _deleteCate(id){
        Modal.confirm({
            title: '确认删除',
            content: '删除文件夹会连同删除文件夹下的子文件夹及图片！',
            okText: '确定',
            cancelText: '取消',
            onOk:()=>{
                msg.emit('delete::cate',{id});
            }
        });
    }

    _changePageNum(page){
        msg.emit('change::page::num',page-1);
    }
}